<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"
	xmlns:dt="http://github.com/dandelion/datatables"
	xmlns:sec="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title th:utext="#{title.newuser}"></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Dhrubo" />

<!-- Le styles -->
<link rel="stylesheet" type="text/css" media="all"
	href="css/bootstrap.css" th:href="@{/resources/css/bootstrap.css}" />
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>

<link rel="stylesheet" type="text/css" media="all"
	href="css/bootstrap-responsive.css"
	th:href="@{/resources/css/bootstrap-responsive.css}" />



</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand" href="#" style="color: yellow; font-weight: bold"
					th:utext="#{product}"></a>
				<div class="nav-collapse collapse">

					<ul class="nav">
						<li><a href="home" th:utext="#{home}"></a></li>

						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown"><span th:utext="#{usecases}"></span> <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newusecase" th:utext="#{new}"></a></li>
								<li><a href="listusecases" th:utext="#{viewall}"></a></li>

							</ul></li>

						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown"><span th:utext="#{projects}"></span> <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject" th:utext="#{new}"></a></li>
								<li><a href="viewallprojects" th:utext="#{viewall}"></a></li>

							</ul></li>


						<li class="dropdown active"
							sec:authorize="hasRole('ROLE_COMPANY_ADMIN')"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Users <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newuser" th:utext="#{new}"></a></li>
								<li><a href="listusers" th:utext="#{viewall}"></a></li>

							</ul></li>

						<li><a href="#about" th:utext="#{docs}"></a></li>

						<!-- 
						<li class="dropdown"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Tickets <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="viewallprojects">View All</a></li>

							</ul></li>

						<li><a href="#about">Help</a></li>
						<li><a href="#contact">Contact</a></li>
						 -->



					</ul>


					<div class="pull-right">
						<ul class="nav pull-right">
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								th:text="#{hi} +' '+ ${#authentication.name}"
								data-toggle="dropdown"><b class="caret"></b></a>
								<ul class="dropdown-menu">
									<!-- 
									<li><a href="/user/preferences"><i class="icon-cog"></i>
											Preferences</a></li>
									<li><a href="/help/support"><i class="icon-envelope"></i>
											Contact Support</a></li>
									<li class="divider"></li>
									 -->
									<li><a href="j_spring_security_logout"><i
											class="icon-off"></i> <span th:utext="#{logout}"></span></a></li>
								</ul></li>
						</ul>
					</div>




				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container-fluid">
	
		<div class="row-fluid">
			<div class="span6">
				<ul class="breadcrumb">
					<li><a href="home" th:utext="#{home}"></a> <span class="divider">/</span></li>

					<li class="active" th:utext="#{newuser}"></li>
				</ul>
			</div>
			<div class="span6">
				<div class="btn-group pull-right">
					<a class="btn btn-primary" href="listusers" th:utext="#{listusers}"></a> 
					
				</div>
			</div>
		</div>
	
	
	
		<div class="row-fluid">

			<div class="span12">

				<form action="authentication" th:action="@{/saveuser}"
					class="form-horizontal" id="newuserform" th:object="${user}"
					method="post">


					<fieldset>
						<legend th:utext="#{newuser}"></legend>

						<div id="message"></div>
						
						<div class="control-group" id="cgname">
							<label class="control-label" for="name" th:utext="#{fullname}"></label>
							<div class="controls">
								<input type="text" th:field="*{name}" class="input-xlarge"
									th:placeholder="#{fullname}"
									required="required" /> <span class="help-inline"></span>
							</div>
						</div>



						<div class="control-group" id="cgemail">
							<label class="control-label" for="name" th:utext="#{email}"></label>
							<div class="controls">
								<input type="text" th:field="*{email}" th:placeholder="#{email}"
									class="input-xlarge" required="required" placeholder="E-mail" />
								<span class="help-inline"></span>
							</div>
						</div>


						<div class="form-actions">
							<button type="submit" class="btn btn-success" th:text="#{save}"></button>
							<button type="reset" class="btn btn-info" th:text="#{cancel}"></button>

							
						</div>

					</fieldset>
				</form>


			</div>
			<!--/span-->
		</div>
		<!--/row-->

		<hr />



	</div>
	<!--/.fluid-container-->

	<div class="container">

		<div class="row-fluid">
			<div class="span12">
				<!-- 
				<div class="span8 pull-left">
					<a href="#" th:utext="#{termsofservice}"></a>| <a href="#"
						th:utext="#{privacy}"></a> |<a th:utext="#{security}" href="#"></a>
				</div>
				 -->
				<div class="span4">
					<p class="muted pull-right" th:utext="#{copyright}"></p>
				</div>
			</div>
		</div>
	</div>


	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	
	<script src="js/jquery.js" th:src="@{/resources/js/jquery.js}"></script>
	
	<script src="js/bootstrap-dropdown.js"
		th:src="@{/resources/js/bootstrap-dropdown.js}"></script>

	<script src="js/bootstrap-alert.js"
		th:src="@{/resources/js/bootstrap-alert.js}"></script>

	<script src="js/newproject.js" th:src="@{/resources/js/newuser.js}"></script>


</body>
</html>
